<template>
	<view class="content" :style="{height:state.windowHeight+'px'}">
		<view class="searchTop pl20 pr20">
			<u-search placeholder="请输入花型编号或分类词" disabled v-model="state.keyword" :showAction='false' @click="toSearchByNumber"></u-search>
			<view class="mr20"></view>
			<u-icon name="camera" size="25" @click="getProductByPicture"></u-icon>
		</view>
		<view class="main">
			<view class="left h100">
				<customMenu @select="menuSelect"></customMenu>
			</view>
			<view class="right h100">
				<scroll-view @scrolltolower="getGoods" scroll-y="true" class="h100" scroll-with-animation :scroll-top="state.scrollTop" @scroll="mainScroll">
					<view class="goods">
						<goodsList :data="state.goods"></goodsList>
					</view>
				</scroll-view>
			</view>
		</view>
		<beforeSearchWithPicture ref="beforeSearchWithPictureRef"></beforeSearchWithPicture>
	</view>
</template>

<script setup>
import { onMounted, reactive, nextTick, ref } from 'vue';
import request from '@/utils/request.js'
	const state = reactive({
		keyword: '',
		windowHeight: '',
		goods: [],
		scrollTop: 0,
		old: {
			scrollTop: 0
		},
		params: {
			page: 0,
			count: 20
		},
		isEnd: false,
		currentClass:''
	})
	// 按产品编号搜索
	const toSearchByNumber = () => {
		console.log(123)
		uni.navigateTo({
			url: '/pages/class/searchProductByNumber'
		})
	}
	const mainScroll = (e) => {
		state.old.scrollTop = e.detail.scrollTop
	}
	const goTop = (e) => {
		state.scrollTop = state.old.scrollTop
		nextTick(function() {
			state.scrollTop = 0
		});
	}
	// 获取列表
	const getGoods = () => {
		if(state.isEnd) return;
		request({
			url:'api/goods/goodsList',
			data: {
				...state.params,
				classifyId: state.currentClass.id
			}
		}).then(res => {
			if(state.params.page === 0) {
				state.goods = res;
			}else {
				state.goods = [...state.goods,...res]
			}
			state.isEnd = res.length < state.params.count;
			console.log(state.isEnd,'end')
			if(!state.isEnd) state.params.page++;
		}).catch(err => {
		})
	}
	// 菜单选中
	const menuSelect = (data) => {
		state.currentClass = data;
		state.isEnd = false;
		state.params.page = 0
		goTop()
		getGoods()
	}
	const beforeSearchWithPictureRef = ref(null)
	// 以图搜图
	const getProductByPicture = () => {
		beforeSearchWithPictureRef.value.checkUserinfo()
	}
	onMounted(() => {
		const windowInfo = uni.getWindowInfo()
		console.log(windowInfo,'windowInfo')
		state.windowHeight = windowInfo.windowHeight;
	})
</script>

<style lang="scss" scoped>
.content {
	$h: 100rpx;
	.searchTop {
		height: $h;
		position: sticky;
		top: 0;
		display: flex;
		align-items: center;
	}
	.main {
		height: calc(100% - $h);
		display: flex;
		.left {
			width: 30%;
			flex-shrink: 0;
			background-color: #fff;
		}
		.right {
			background-color: #f5f5f5;
			width: 70%;
			flex-shrink: 0;
			.goods {
				padding: 30rpx;
			}
		}
	}
}
</style>
